<script type="text/ng-template" id="group-template.html">
  <div class="panel panel-default"uib-accordion-transclude="heading">
    <div ng-click="toggleOpen()" uib-accordion-header>
      {{heading}}
    </div>
    <div class="panel-collapse collapse" uib-collapse="!isOpen">
      <div class="panel-body" ng-transclude></div>
    </div>
  </div>
</script>

<div class="sidebar sidebar-default" dir="ltr" ng-transclude>
  <div class="sidebar-fold" ng-click="collapse($event)"><div class="sidebar-fold-fa"><i class="fa fa-fw fa-bars"></i></div></div>
  <div class="sidebar-wrapper">
    <uib-accordion class="sidebar-accordion" dir="ltr" close-others="false">
      <div class="panel-default" ng-if="hasAuth(group)" ng-repeat="group in groups" uib-accordion-group is-open="true" template-url="group-template.html">
        <uib-accordion-heading>
          <div class="panel-heading" ng-class="{main: !group.leaf, active: group === itemSelected}" uib-tooltip="{{group.title}}" tooltip-enable="{{tooltipEnable}}" tooltip-append-to-body="true" tooltip-placement="right">
            <h4 class="panel-title" ng-click="select(group)">
              <a href="javascript:void(0);" tabindex="0" class="accordion-toggle" >
              <span ng-class="{'text-muted': isDisabled}">
                <i class="fa fa-fw {{group.icon}}"></i><span class="nav-title"> {{group.title}}</span>
                <span class="pull-right config hidden" ng-if="!group.leaf" ng-click="groupConfig($event)" uib-tooltip="自定义{{group.title}}" tooltip-enable="{{!tooltipEnable}}" tooltip-append-to-body="true" tooltip-placement="right"><i class="fa fa-fw fa-cog"></i></span>
              </span>
              </a>
            </h4>
          </div>
        </uib-accordion-heading>
        <div ng-if="!group.leaf && hasAuth(item)" class="panel-default" ng-repeat="item in group.items" uib-accordion-group is-open="true" template-url="group-template.html">
          <uib-accordion-heading>
            <div class="panel-heading" ng-class="{active: item === itemSelected}" uib-tooltip="{{item.title}}" tooltip-enable="{{tooltipEnable}}" tooltip-append-to-body="true" tooltip-placement="right">
              <h4 class="panel-title" ng-click="select(item)">
                <a href="javascript:void(0);" tabindex="0" class="accordion-toggle">
                <span ng-class="{'text-muted': isDisabled}">
                  <i class="fa fa-fw {{item.icon}}"></i><span class="nav-title"> {{item.title}}</span>
                </span>
                </a>
              </h4>
            </div>
          </uib-accordion-heading>
        </div>
      </div>
    </uib-accordion>
  </div>

</div>
